/**
 * Created by ray on 17-6-9.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React,{ Component,PropTypes } from 'react';

import {
    StyleSheet,
    View,
    TextInput,
    Image,
    TouchableOpacity,
} from 'react-native';

import { request,apiStore,configure } from '../service/api';

export default class SearchBar extends Component {

    constructor(props){
        super(props);
        this.state = {
            inputText:''
        }
    }



//输入框的onChange实现
    getContent (text) {
        console.log(this);
        this.setState({
            inputText:text,
        })
    }
     clickBtn() {
        request(
            apiStore.houseInfo.search,
            configure.POST,
            configure.Body('search?')
        )
    }

    render() {
        return(
            <View style = {styles.container}>
                <View style = {styles.searchBox}>
                    <TextInput
                        style={styles.input}
                        autoFocus={true}
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        returnKeyType='search'
                        placeholder={'请输入内容 '}
                        selectionColor="pink"   //光标颜色
                        underlineColorAndroid='transparent' //设置下划线背景色透明 达到去掉下划线的效果
                        onChangeText={(text)=>this.getContent(text)}
                        value={this.state.inputText}

                    />
                    <TouchableOpacity onPress={this.clickBtn.bind(this)}>
                        <Image style={styles.searchIcon}
                               source={require('../images/search.png')}/>
                    </TouchableOpacity>

                </View>

            </View>
        );
    }
}


const styles = StyleSheet.create({
    container:{
        marginTop:10,
        flexDirection:"row", //水平布局
        alignItems:'center'
    },

    input:{
        flex:1,
        backgroundColor:'#FFF',
        paddingLeft:35,
        fontSize:12,

    },
    searchIcon:{
        height:25,
        width:25,
        marginRight:15,
        resizeMode: 'stretch'
    },
    searchBox:{
        flex:1,
        height:50,
        flexDirection:'row',
        borderRadius:5,
        borderColor:'pink',
        borderWidth:1,
        alignItems:'center',
        color:"#FFF",
        fontWeight:"bold",
        marginLeft:10,
        marginRight:10
    },
});